<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body class="prevent-transitions off-canvas-on">
        <!-- TOP BAR -->
        <div class="top-bar">
            <div class="logged-user">
                <div class="logged-user-avatar">
                    <img src="http://lorempixel.com/30/30/people/9" alt="" />
                </div>
                <span>Storm Trooper</span>
                <i class="fa fa-caret-down"></i>
            </div>

            <div class="dropdown table-name">
                <span>SmallSat Database</span>
                <i class="fa fa-caret-down"></i>
            </div>

            <button class="save"><i class="fa fa-floppy-o"></i> <span>Save</span></button>

            <div class="dropdown export"><i class="fa fa-download"></i> <span>Export</span> <i class="fa fa-caret-down"></i></div>
        </div>

    <div class="off-canvas-wrapper">
        <h1 class="hide">SmallSat Database</h1>
        <div class="off-canvas-pusher">
            <main>
                <!-- FILTERS CUSTOM + SEARCH -->
                <header class="table-filters">
                    <div class="table-filters-search">
                        <button class="edit-columns">
                            <i class="fa fa-columns"></i>
                            <span>Edit columns</span>
                        </button>
                        <form action="">
                            <input id="search-in-table" type="text" name="search" placeholder="search"/>
                            <button class="submit-search"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                    <div class="table-filters-custom">
                        <button class="main-color-btn open-mobile-filters"><i class="fa fa-filter"></i> <span>Filters</span></button>
                        <button class="main-color-btn new-custom-filter"><i class="fa fa-plus"></i> <span>New filter</span></button>
                        <p style="display: none;"><strong>Filter columns</strong> directly or create <strong>custom filters</strong> to find the designs you need.</p>

                        <div class="active-filters">
                            <label>Filters:</label>
                            <button class="attribute">Country</button>
                            <button class="operator and"></button>
                            <button class="attribute">Launch Mass</button>
                            <button class="operator or"></button>
                            <button class="attribute">Industry</button>
                            <button class="operator and"></button>
                            <button class="attribute">Ejector</button>
                        </div>
                    </div>
                </header>
                <?php include('table_html.php'); ?>

                <!-- MAIN FOOTER -->
                <footer class="footer">
                    <button class="border-btn">Suggest a Mission</button>
                    <p class="last-update">Last updated: 09.21.2014</p>
                    <p class="made-by"><span class="smallsat"><strong>SmallSat</strong> Database</span> <span class="dext">by DextSolutions</span></p>
                </footer>
            </main>
            <div class="content-overlay"></div>
        </div>
        
        <div class="off-canvas">

            <div class="mission-summary off-canvas-content mission-admin">
                <button class="main-color-btn mission-edit-btn">
                    <i class="fa fa-pencil-square-o"></i>
                    <span>Edit Mission</span>
                </button>
                <div class="mission-owner">Owner <strong>SmallSatDB</strong></div>
                <button class="close-off-canvas">
                    <i class="fa fa-times"></i>
                </button>
                <header>
                    <h4 class="mission-title">Sample mission</h4>
                </header>
                <p class="mission-description">
                    I remember him as if it were yesterday, as he came plodding to the inn door, his sea-chest following behind him in a hand-barrow--a tall, strong, heavy, nut-brown man, his tarry pigtail falling over the shoulder of his soiled blue coat, his hands ragged and scarred, with black, broken nails, and the sabre cut across one cheek, a dirty, livid white.
                </p>
                <div class="mission-attribute-search">
                    <input id="mission-attribute-search" type="text" placeholder="Search this mission"/>
                </div>
                <div class="mission-imgs">
                    <div class="mission-img">
                        <img src="http://lorempixel.com/60/60/" alt="" />
                    </div>
                    <div class="mission-img">
                        <img src="http://lorempixel.com/60/60/" alt="" />
                    </div>
                    <div class="mission-img">
                        <img src="http://lorempixel.com/60/60/" alt="" />
                    </div>
                </div>
                <ul class="mission-attributes">
                    <li><span class="attribute-name">Mission Status</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Ejector</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Launch mass [kg]</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Size</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">COSPAR ID</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">NORAD Object</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Country</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Organisation</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Industry</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Launch date</span><span class="attribute-value">74460km/h</span></li>
                    <li><span class="attribute-name">Launch</span><span class="attribute-value">74460km/h</span></li>
                </ul>
            </div>

            <div class="edit-mission">
                <div class="edit-mission-actions">
                    <button>
                        <i class="fa fa-floppy-o"></i>
                        <span>Save</span>
                    </button><!--
                 --><button>
<i class="fa fa-times"></i>
<span>Dismiss</span>
</button>
                </div>
<div class="mission-owner">Owner <strong>SmallSatDB</strong></div>
<form>
<input type="text" name="" placeholder="Mission name" />
<textarea placeholder="Mission description" />
<div class="mission-img-upload">
<div class="mission-img-upload-mask">Add new image</div>
<input type="file" />
</div>
</form>
            </div>

            <div class="mobile-custom-filters off-canvas-content">
                <button class="close-off-canvas">
                    <i class="fa fa-times"></i>
                </button>
                <div class="main-color-btn new-custom-filter"><i class="fa fa-plus"></i> <span>New filter</span></div>
                
                <div class="active-filters">
                    <div class="mobile-filter">
                        <button class="remove-this-filter">remove</button>
                        <button class="attribute">Country</button>
                        <button class="operator and"></button>
                    </div>
                    <div class="mobile-filter">
                        <button class="remove-this-filter">remove</button>
                        <button class="attribute">Launch Mass</button>
                        <button class="operator or"></button>
                    </div>
                    <div class="mobile-filter">
                        <button class="remove-this-filter">remove</button>
                        <button class="attribute">Industry</button>
                        <button class="operator and"></button>
                    </div>
                    <div class="mobile-filter">
                        <button class="remove-this-filter">remove</button>
                        <button class="attribute">Ejector</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        // PREVENT TRANSITIONS ON PAGE LOAD
        setTimeout(function() {
            $('body').removeClass('prevent-transitions');
        }, 1);

        /* GENERATORS */
        function make_mesurable() {
            var text = "asd ";
            var possible = "0123456789";

            for (i = 0; i < 5; i++) {
                text += possible.charAt(Math.floor(Math.random() * possible.length));
            }

            text += 'km/h';
            return text;
        }

        function make_string() {
            var text = '',
                    possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
                    words = Math.floor(Math.random() * 4);
            for (w = 0; w < words; w++) {
                if (w > 0) {
                    text += ' ';
                }
                var letters = Math.floor(Math.random() * 7) + 1;
                for (i = 0; i < letters; i++) {
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                }
            }
            return text;
        }

        function make_selectable() {
            var text,
                    possible = ['ABC', 'DEF', 'GHI'];
            selected_id = Math.floor(Math.random() * 3);

            text = possible[selected_id];
            return text;
        }

        var generators = {
            measurable: make_mesurable,
            string: make_string,
            selectable: make_selectable
        };

        /* END GENERATORS */

        var attributes = [];

        $('th').each(function() {
            attributes[$(this).index()] = $(this).data('type');
        });

        // EXEC GENERATORS
        $('td').each(function() {
            var this_index = $(this).index(),
                    type = attributes[this_index];
            $(this).text(generators[type]());
        });


        $('.main-table').on('scroll', function() {
            if ($(window).width() > 640) {
                var position = $('table').position();
                $('th').css({'top': -position.top});
                $('tr > *:first-child').css({'left': -position.left});
            }
        });


        // SEARCH IN TABLE
        var $td_elements = $('td');
        $('#search-in-table').on('keyup', function() {
            $('tr').hide();
            $('thead').find('tr').show();


            var search_term = $(this).val();

            $td_elements.each(function() {
                if ($(this).text().toLowerCase().indexOf(search_term) > -1) {
                    $(this).closest('tr').show();
                }
            });
        });
        
        // SEARCH IN MISSION
        var $mission_stributes = $('.mission-attributes');
        $('#mission-attribute-search').on('keyup', function() {
            $mission_stributes.find('li').hide();

            var search_term = $(this).val();

            $mission_stributes.find('span').each(function() {
                if ($(this).text().toLowerCase().indexOf(search_term) > -1) {
                    $(this).closest('li').show();
                }
            });
        });

        var data_filter = {
            operator: 'empty',
            term: {max: 40000, min: 20000}
        };

        var filter_functions = {
            measurable: filter_measurable,
            string: filter_string
        };

        function filter_string(params, string) {
            var result;
            switch (params.operator) {
                case 'equal':
                    result = string.toLowerCase() === params.term.toLowerCase();
                    break;
                case 'contain':
                    result = string.toLowerCase().indexOf(params.term.toLowerCase()) > -1;
                    break;
                case 'start':
                    result = string.toLowerCase().indexOf(params.term.toLowerCase()) === 0;
                    break;
                case 'end':
                    result = string.toLowerCase().indexOf(params.term.toLowerCase()) === (string.length - params.term.length);
                    break;
                case 'empty':
                    result = string === '';
                    console.log(result);
                    break;
                case 'not_empty':
                    result = string !== '';
                    break;
            }
            return result;
        }

        function filter_measurable(params, string) {
            var result;
            string = string.match(/\d/g).join('');

            switch (params.operator) {
                case 'greater_than':
                    result = string >= params.term;
                    break;
                case 'lower_than':
                    result = string >= params.term;
                    break;
                case 'between':
                    result = params.term.min <= string && string <= params.term.max;
                    break;
            }
            return result;
        }

        var filters_obj = {};

        function apply_filters() {

        }

        function single_filter(params, type) {
            $('tr').hide();
            $('thead').find('tr').show();

            $td_elements.each(function() {
                if ($(this).index() === params.index) {
                    var content = $(this).text();
                    if (filter_functions[type](params, content)) {
                        $(this).closest('tr').show();
                    }
                }
            });
        }
        $('.close-off-canvas').on('click', function(){
            $('body').removeClass('off-canvas-on');
            $('.content-overlay').fadeOut(500);
            setTimeout(function(){
                $('.off-canvas-content').hide();
            }, 500);
        });
        $('.content-overlay').on('click', function(){
            $('body').removeClass('off-canvas-on');
            $('.content-overlay').fadeOut(500);
            setTimeout(function(){
                $('.off-canvas-content').hide();
            }, 500);
        });
        
        $('.open-mission-summary').on('click', function(){
            $('.mission-summary').show();
            $('body').addClass('off-canvas-on');
            $('.content-overlay').fadeIn(500);
        });
        $('.open-mobile-filters').on('click', function(){
            $('body').addClass('off-canvas-on');
            $('.content-overlay').fadeIn(500);
            $('.mobile-custom-filters').show();
        });
    </script>
</body>
</html>